<template>
  <div class="user-wrapper" :class="theme">
    <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        {{$t('m.system.portal.entity.home')}}
      </template>
      <a-icon type="home" @click="toPortal" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>

    <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        {{ fullScreen ? $t('m.system.portal.entity.nuFullScreen') : $t('m.system.portal.entity.fullScreen') }}
      </template>
      <a-icon
        :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
        @click="toggleFullScreen"
        :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>

    <a-dropdown>
      <span class="action action-full ant-dropdown-link user-dropdown-menu">
        <a-avatar class="avatar" :src="getAvatar()"/>
        <span v-if="isDesktop()">{{ nickname() }}</span>
        <a-icon type="caret-down" />
      </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
        <a-menu-item key="0" style="cursor:default; background: none;">
          <span style="padding: 24px 10px 24px 10px">
            {{$t('m.system.portal.entity.department')}}：{{ orgname() || $t('m.system.portal.entity.notDepartment') }}
          </span>
          <a-divider style="margin: 10px"/>
        </a-menu-item>

        <a-menu-item key="11" @click="toPortal" v-if="isMobile()">
          <ych-icon type="home"/>
          <span>{{$t('m.system.portal.entity.home')}}</span>
        </a-menu-item>
        <a-menu-item key="12" @click="toggleFullScreen" v-if="isMobile()">
          <ych-icon :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"/>
          <span>{{ fullScreen ? $t('m.system.portal.entity.nuFullScreen') : $t('m.system.portal.entity.fullScreen') }}</span>
        </a-menu-item>

        <a-menu-item key="1" @click="updatePassword">
          <ych-icon type="lock"/>
          <span>{{$t('m.system.portal.entity.changePassword')}}</span>
        </a-menu-item>
        <a-menu-item key="2" @click="updateCurrentDepart">
          <ych-icon type="cluster"/>
          <span>{{$t('m.system.portal.entity.changeDepartment')}}</span>
        </a-menu-item>
        <!--<a-menu-item key="3" @click="licInfo">
          <ych-icon type="safety-certificate"/>
          <span>版权信息</span>
        </a-menu-item>-->
        <!--<a-menu-item key="4" @click="updateCurrentLanguage">
          <ych-icon type="folder"/>
          <span>{{$t('m.system.portal.entity.switchLanguage')}}</span>
        </a-menu-item>-->
        <a-menu-item key="5" @click="handleLogout">
          <ych-icon type="logout"/>
          <span>{{$t('m.system.portal.entity.logout')}}</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <user-password ref="userPassword"></user-password>
    <depart-select ref="departSelect" :closable="true" :title="$t('m.system.portal.entity.changeDepartment')"></depart-select>
    <setting-drawer ref="settingDrawer" :closable="true" :title="$t('m.system.portal.entity.settings')"></setting-drawer>
    <lic-info ref="licInfo" @updateLic="updateLic"></lic-info>
    <update-lic ref="updateLic" @afterUpdateLic="licInfo"></update-lic>
    <language-select ref="languageSelect"></language-select>
  </div>
</template>

<script>

import UserPassword from '../tools/UserPassword'
import DepartSelect from '../tools/DepartSelect'
import SettingDrawer from '@/framework/setting/SettingDrawer'
import {mapActions, mapGetters, mapState} from 'vuex'
import {mixinDevice} from '@/utils/mixin.js'
import {getFileAccessHttpUrl} from '@/api/manage'
import {INDEX_MAIN_PAGE_PATH} from '@/store/mutation-types'
import LicInfo from './LicInfo'
import UpdateLic from './UpdateLic'
import LanguageSelect from "../tools/LanguageSelect";

export default {
  name: 'ConsoleUserMenu',
  mixins: [mixinDevice],
  data() {
    return {
      fullScreen: document.fullscreenElement,
      searchMenuOptions: [],
      searchMenuComp: 'span',
      searchMenuVisible: false,
    }
  },
  components: {
    UserPassword,
    DepartSelect,
    LanguageSelect,
    SettingDrawer,
    LicInfo,
    UpdateLic,
  },
  props: {
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  created() {
    let lists = []
    this.searchMenus(lists, this.permissionMenuList)
    this.searchMenuOptions = [...lists]
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList

    })
  },
  watch: {
    device: {
      immediate: true,
      handler() {
        this.searchMenuVisible = false
        this.searchMenuComp = this.isMobile() ? 'a-modal' : 'span'
      },
    },
  },
  methods: {
    // 全屏切换
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
      this.fullScreen = !this.fullScreen
    },
    showClick() {
      this.searchMenuVisible = true
    },
    hiddenClick() {
      this.shows = false
    },
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'orgname', 'avatar', 'userInfo']),
    getAvatar() {
      const avatar = getFileAccessHttpUrl(this.avatar())
      if (avatar) {
        return avatar
      } else {
        return process.env.BASE_URL + 'avatar.jpg'
      }
    },
    handleLogout() {
      const that = this

      this.$confirm({
        title: this.$t('m.common.label.prompt'),
        content:this.$t('m.system.portal.verify.logout'),
        onOk() {
          return that.Logout({oss: true}).then(() => {
            // window.location.href = process.env.BASE_URL || '/'
            //window.location.reload()
            that.$router.push({path:'/index/login'}).catch(err => {})
          }).catch(err => {
            that.messageUtil.error(err.message)
          })
        },
        onCancel() {
        },
      })
    },
    toPortal() {
      this.$router.push(INDEX_MAIN_PAGE_PATH).catch(err => {})
    },
    licInfo() {
      this.$refs.licInfo.show()
    },
    updateLic() {
      this.$refs.updateLic.show()
    },
    updatePassword() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    updateCurrentDepart() {
      this.$refs.departSelect.show()
    },
    updateCurrentLanguage() {
      this.$refs.languageSelect.show()
    },
    searchMenus(arr, menus) {
      for (let i of menus) {
        if (!i.hidden && 'layouts/RouteView' !== i.component) {
          arr.push(i)
        }
        if (i.children && i.children.length > 0) {
          this.searchMenus(arr, i.children)
        }
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    searchMethods(value) {
      let route = this.searchMenuOptions.filter(item => item.id === value)[0]
      if (route.meta.internalOrExternal === true || route.component.includes('layouts/IframePageView')) {
        window.open(route.meta.url, '_blank')
      } else {
        this.$router.push({path: route.path}).catch(err => {})
      }
      this.searchMenuVisible = false
    }
  }
}
</script>
